<template>
  <div class="container">
    <load-more :loading-text="loadingText"
               :has-more="hasMore"
               v-if="returnCode === '200'">
      <div>
        <good-list-item v-for="(item,index) in downData" :key="index" :data="item" />
      </div>
    </load-more>
    <load-more  class="appointmentListEmpty" v-else>
      <div>{{desc}}</div>
    </load-more>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

import axios from 'axios';
import loadMore from '../../components/common/LoadMore';
import goodListItem from '../../components/widget/GoodListItem';


export default {
  name: 'GoodList',
  components: {
    loadMore,
    goodListItem,
  },
  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      loadingText: '加载更多',
      downData: [], // 上拉更多的数据存放数组
      returnCode: '',
      desc: '',
      hasMore: false,
    };
  },
  methods: {
    onInfinite(done) {
      console.log(`-onInfinite--${this.pageIndex}`);
      this.loading = true;
      axios.get('/api/goodsList', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        console.log(`---${res}`);
        if (res.status === 200) {
          this.returnCode = '200';
          const dataList = res.data.result.data;
          const oldAry = [...this.downData];
          this.downData = [...oldAry, ...dataList];
          const totalpage = res.data.result.totalPage;
          if (this.pageIndex >= totalpage) {
            this.loadingText = '没有更多了';
            this.hasMore = false;
          } else {
            this.hasMore = true;
          }
          this.pageIndex += 1;
          this.loading = false;
        } else {
          this.desc = res.data.result.errorMessage;
          this.loading = false;
        }
        // done();
      }).catch((error) => {
        console.error(error);
        this.loadingText = '没有更多了';
        this.hasMore = false;
      });
    },
  },
  created() {
    this.onInfinite();
  },
  computed: {
    getLoadMore() {
      return this.$store.state.loadMore;
    },
  },
  watch: {
    getLoadMore(loading) {
      if (loading) {
        this.onInfinite();
      }
    },
  },
};
</script>

<style scoped>
  .container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #FFF;
  }
  .appointmentListEmpty {
    text-align: center;
    vertical-align: middle;
  }

</style>
